<template>
  <div class="app-container">
    <el-card>
      <!-- 头部 begin -->
      <div slot="header" class="app-card-header">
        <div class="left">
          <span class="header-title">广告列表</span>
        </div>
        <div class="right">
          <el-button size="small" icon="el-icon-plus" type="primary">新增</el-button>
        </div>
      </div>
      <!-- 头部 end -->

      <!-- 表格 begin -->
      <el-table class="app-table" :data="goodsList" stripe v-loading="listLoading" element-loading-text="拼命加载中">
        <el-table-column label="商品信息" min-width="30%" align="center">
          <template>
            <div class="app-goods-wrap">
              <el-image src="https://img.alicdn.com/bao/uploaded/i1/2206615658823/O1CN015mXr712F2zBbGjSSU_!!0-item_pic.jpg" class="g-img" fit="cover"></el-image>
              <div class="g-info-wrap">
                <div class="g-name">【朱丹推荐】兔头妈妈甄选air空气裤纸尿裤拉拉裤婴儿透气超薄夏</div>
                <div class="g-desc">销量：999</div>
                <div class="g-info">货号：77777</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="价格" min-width="10%" align="center">
          <template>
            12.66
          </template>
        </el-table-column>
        <el-table-column label="库存" min-width="10%" align="center">
          <template>
            12.66
          </template>
        </el-table-column>
        <el-table-column label="排序" min-width="10%" align="center">
          <template>
            12.66
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="10%" align="center">
          <template>
            12.66
          </template>
        </el-table-column>
        <el-table-column label="创建时间" min-width="15%" align="center">
          <template>
            2021年8月21日 14:37:10
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="15%" align="center">
          <template>
              <el-button size="mini" >编辑</el-button>
             <el-button size="mini" type="danger" >删除</el-button>
          </template>
        </el-table-column>
        <!-- 空状态 -->
        <template slot="empty">
          <el-empty :image-size="120" description="暂无数据"></el-empty>
        </template>
      </el-table>
      <!-- 表格 end -->

    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listLoading: true,
      goodsList: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      setTimeout(() => {
        this.goodsList = [
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
        ];
        this.listLoading = false;
      }, 800);
    },
  },
};
</script>

<style></style>
